<template>
    <view>
        <!-- gc_school/pages/shop/order.wxml -->
        <cu-custom bgColor="bgmain" :isBack="true">
            <view slot="content">订单列表</view>
        </cu-custom>

        <view class="tab_menu">
            <view :class="'item ' + (tab_index == 3 ? 'active' : '')" @tap="changeTab" data-index="3">待取货</view>
            <view :class="'item ' + (tab_index == 7 ? 'active' : '')" @tap="changeTab" data-index="7">待送达</view>


            <view :class="'item ' + (tab_index == 10 ? 'active' : '')" @tap="changeTab" data-index="10">待到店</view>
            <view :class="'item ' + (tab_index == 9 ? 'active' : '')" @tap="changeTab" data-index="9">待取消</view>
            <view :class="'item ' + (tab_index == 4 ? 'active' : '')" @tap="changeTab" data-index="4">已完成</view>
        </view>

        <view class="order_box">
            <block v-if="orderList.length > 0">
                <block v-for="(item, index) in orderList" :key="index">
                    <view class="order_item">

                        <view class="text-df" style="font-size:36rpx;">商品信息</view>
                        <block v-for="(good, index1) in item.good_details" :key="index1">
                            <view class="text-df">{{ good }}</view>
                        </block>
                        <view class="flex justify-between align-center margin-top-xs">
                            <view class="text-df" style="line-height: 50rpx">
                                <!-- <view>抽成金额:￥{{item.store_money}}</view> -->
                                <!-- <view>商品价格:￥{{item.guess_prcie}}</view> -->
                                <!-- <view>商家实得:<text class="text-orange text-bold text-xl">￥{{my.tofixed(item.guess_prcie-item.store_money)}}</text></view> -->
                                <text class="text-grey"> 商品价格:</text>
                                <text class="text-orange text-bold text-xl">￥{{ my.tofixed(item.food_money)}}</text>
                            </view>
                            <!-- <view class="status">{{ item.status }}</view> -->
                        </view>
                        <view class="text-df text-grey">下单时间：
                            <view>
                                {{ item.createtime |formatDate }}
                            </view>
                        </view>
                        <view class="text-df text-grey" v-if="item.sh_name">用户姓名：
                            <view>{{ item.sh_name }}</view>
                        </view>
                       
                        <view class="text-df text-grey" @click="call(item.phone)" v-if="item.phone">
                            用户手机号：
                            <view>
                                {{ item.phone }}
                                <text style="color:#ff6344;" class="cuIcon-phone margin-left-xs"></text>
                            </view>
                        </view>
                        <view class="text-df text-grey"  v-if="item.arrival_time">
                            到店时间
                            <view>
                                {{ item.arrival_time }}
                            </view>
                        </view>
                        <view class="text-df text-grey" @click="call(item.sh_phone)" v-if="item.sh_phone">
                            用户手机号：
                            <view>
                                {{ item.sh_phone }}
                                <text style="color:#ff6344;" class="cuIcon-phone margin-left-xs"></text>
                            </view>
                        </view>
                        
                        
                        <view class="text-df text-grey">
                            用户备注：
                            <view>
                                {{ item.remarks ||"用户无备注"}}
                            </view>
                        </view>
                        <view class="text-df text-grey" v-if="item.rider_name">
                            骑手姓名：
                            <view>
                                {{ item.rider_name }}
                            </view>
                        </view>
                        <view class="text-df text-grey" @click="call(item.rider_phone)" v-if="item.rider_phone">
                            骑手手机号：
                            <view>
                                {{ item.rider_phone }}
                                <text style="color:#ff6344;" class="cuIcon-phone margin-left-xs"></text>
                            </view>
                        </view>
                        <view class="text-df text-grey" >
                            是否骑手垫付
                            <view>
                                {{ item.is_open_pay==1?"是":"否" }}
                            </view>
                        </view>
                        <view class="text-df text-grey" v-if="item.cancel_reason && tab_index==9">
                            取消原因：
                            <view>
                                {{ item.cancel_reason }}
                            </view>
                        </view>

                        

                        <view class="row opt_btn" v-if="tab_index==9">
                            <view class="btn btn1 row" @click="agree" :data-id="item.id"> 同意取消 </view>
                            <view class="btn btn2 row" @click="cancel"  data-type="2"  :data-id="item.id"> 拒绝取消 </view>
                        </view>


                    </view>
                </block>
            </block>
            <block v-else>
                <view class="empty">
                    <image class="" src="/static/images/store/empty.png" mode="widthFix"></image>
                    <view>暂无相关数据~</view>
                </view>
            </block>

            <!-- <view class="text-df text-center margin-bottom" v-if="!is_loadmore && orderList.length > 0">暂无更多数据~</view> -->
        </view>
    </view>
</template>
<script module="my" lang="wxs">
var tofixed = function(str) {
if(str =='NaN'){
		return 0;
}else{
		var pick = parseFloat(str).toFixed(2);
		console.log(pick);
  		return pick;
}

}
module.exports.tofixed = tofixed
</script>
<script>
// gc_school/pages/shop/order.js
var app = getApp();
export default {
    data() {
        return {
            orderList: [],
            tab_index: 3,
            is_loadmore: true,
            page: 1,
            good: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.getOrder();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.page=1
        this.orderList=[]
        this.pullDown.start()
        this.getOrder();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    // onShareAppMessage: function () {
    // }
    onReachBottom: function () {
        if (this.is_loadmore) {
            this.setData({
                page: this.page + 1
            });
            this.getOrder();
        }
    },
    /**
     * 用户点击右上角分享
     */ methods: {
          getOrder() {
            var that = this;
            app.globalData.util.request({
                url: 'ZhBusiness/businessOrderList',
				method: 'GET',
                data: {
                    page: this.page,
                    status: this.tab_index,
                    s_id: uni.getStorageSync('schoolId')
                },

                success(res) {
                   
                    that.pullDown.end()
                    if (res.data.data.data.length < 5) {
                        that.setData({
                            is_loadmore: false
                        });
                    }
					console.log(res.data.data.data)
                    var datas = [...that.orderList, ...res.data.data.data];
                    that.setData({
                        orderList: datas
                    });
                }
            },true);
        },

        changeTab(e) {
            // console.log(e.currentTarget.dataset.index)
            this.setData({
                tab_index: e.currentTarget.dataset.index,
                page: 1,
                orderList: [],
                is_loadmore: true
            });
            this.getOrder();
        },
        call(phoneNumber=""){
            uni.makePhoneCall({
                phoneNumber
            });
        },
         agree(e) {
            var self = this;
            app.globalData.util.request({
                url: 'Order/agreeCancel',
                data: {
                    o_id: e.currentTarget.dataset.id,
                },

                success(result) {
                    if (result.data.status == 200) {
                        uni.showToast({
                            title: result.data.msg,
							duration:1000
                        });
                        self.page=1
                        self.orderList=[]
                        self.getOrder();
                        
                    }
                }
            },true);
        },

        cancel(e) {
            uni.navigateTo({
                url: '/gc_school/pages/order/reason?id=' + e.currentTarget.dataset.id + '&type=' + e.currentTarget.dataset.type +"&user_type=store"
            }); 
        },
    }
};
</script>
<style lang="scss">
/* gc_school/pages/shop/order.wxss */
page {
    background-color: white;
}
.tab_menu {
    display: flex;
    padding: 20rpx 0;
}
.tab_menu .item {
    font-size: 32rpx;
    width: 33.3%;
    text-align: center;
    line-height: 70rpx;
    border-bottom: 1rpx solid #f9f9f9;
    margin-bottom: 30rpx;
    position: relative;
    padding-bottom: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    &.active{
    color: #ff6344;
        &:after {
            content: '';
            position: absolute;
            width: 55rpx;
            height: 6rpx;
            bottom: 0;
            background-color: #ff6344;
        }
    }
}

.order_item {
    width: 90%;
    margin: 10rpx 0 50rpx 5%;
    padding: 30rpx;
    border-radius: 15rpx;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
}
.text-sm,
text-df {
    line-height: 55rpx;
}
.status {
    border: 1rpx solid #999999;
    padding: 5rpx 20rpx;
    color: #323232;
}
.empty {
    margin: 100rpx auto;
    text-align: center;
    font-size: 30rpx;
    color: gray;
}
.empty image {
    width: 300rpx;
    /* height: 200rpx; */
}

.text-df {
    font-size: 28rpx;
    justify-content: space-between;
    display: flex;
    width: 100%;
    padding:5rpx 0;
}
.opt_btn{
    margin-top: 30rpx;
    justify-content: space-between;
    .btn{
        border: 1px solid #ff6344;
        height: 80rpx;
        border-radius: 100rpx;
        width: 240rpx;
        padding: 0px;
        justify-content: center;
        display:flex;
            // background: white;
            // color: #ff6344;
            &.btn1{
                background-color: #ff6344;
                color: #fff;
            }
            &.btn2{
                border-color: #999999;
                color: #999;
            }
    }
}
</style>
